<template>
    <el-aside width="200px">
        <el-scrollbar>
            <el-menu :default-active="route.fullPath" class="el-menu-vertical-demo" style="height: 100vh;"
                router="true">
                <template v-for="item in Menulist" :key="item.path">
                    <el-sub-menu :index="item.path" v-if="checkAuth(item.path) && item.children.length">
                        <template #title>
                            <el-icon>
                                <component :is="mapIcons[item.icon]"></component>
                            </el-icon>
                            <span>{{ item.title }}</span>
                        </template>
                        <template v-for="i in item.children" :key="i.path">
                            <el-menu-item :index="i.path" v-if="checkAuth(i.path)">
                                <el-icon>
                                    <component :is="mapIcons[i.icon]"></component>
                                </el-icon>
                                <span>{{ i.title }}</span>
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                    <el-menu-item :index="item.path" v-else-if="checkAuth(item.path)">
                        <el-icon>
                            <component :is="mapIcons[item.icon]"></component>
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios';
import {
    User,
    HomeFilled,
    Key,
    OfficeBuilding,
    UploadFilled,
    List
} from '@element-plus/icons-vue'

import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/useUserStore'

const route = useRoute()

onMounted(() => {
    getList()
})

const Menulist = ref({})
const getList = async () => {
    let res = await axios.get("/adminapi/rights")
    Menulist.value = res.data
}

// 图标映射文件
const mapIcons = {
    User,
    HomeFilled,
    Key,
    OfficeBuilding,
    UploadFilled,
    List
}

// 权限检查
const { user } = useUserStore()
const checkAuth = (path) => {
    return user.role.rights.includes(path)
}
</script>